import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_getx/app/base/load_image.dart';
import 'package:flutter_getx/app/base/my_app_bar.dart';
import 'package:flutter_getx/app/base/my_scroll_view.dart';
import 'package:flutter_getx/app/base/theme_button.dart';
import 'package:flutter_getx/core/utils/show_utils.dart';
import 'package:flutter_getx/core/utils/utils.dart';
import 'package:flutter_getx/ext/ext.dart';
import 'package:flutter_getx/ext/functions_common.dart';
import 'package:flutter_getx/res/colors/colors.dart';
import 'package:flutter_getx/res/dimens/dimens.dart';
import 'package:flutter_getx/res/styles.dart';
import 'package:flutter_getx/widgets/input_text_field.dart';
import 'package:flutter_getx/widgets/my_text_field.dart';
import 'package:get/get.dart';

import 'login_logic.dart';

class LoginPage extends StatelessWidget {
  final logic = Get.put(LoginLogic());
  final state = Get.find<LoginLogic>().state;

  LoginPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetBuilder<LoginLogic>(
      assignId: true,
      builder: (logic) {
        return Container(
            color: colorBg,
            child: AnnotatedRegion<SystemUiOverlayStyle>(
                value: SystemUiOverlayStyle.dark, //状态栏文字颜色黑色
                child: MediaQuery.removePadding(
                    context: context,
                    removeTop: true,
                    child: Stack(alignment: Alignment.topCenter, children: [
                      Material(
                        child: Form(
                          key: state.key,
                          child: MyScrollView(
                            physics: const ClampingScrollPhysics(),
                            keyboardConfig: Utils.getKeyboardActionsConfig(<FocusNode>[state.nodeText1, state.nodeText2]),
                            children: _buildBody,
                          ),
                        ),
                      ),
                      Column(children: const [
                        SizedBox(
                          height: 30,
                        ),
                        MyAppBar(
                          backgroundColor: Colors.transparent,
                        ),
                      ]),
                      Positioned(
                        left: 0,
                        right: 0,
                        bottom: Dp.dp_20,
                        child: Center(
                            child: Padding(
                          padding: EdgeInsets.symmetric(horizontal: Dp.dp_25),
                          child: RichText(
                              maxLines: 2,
                              text: TextSpan(
                                  text: 'By continuing, I agree to the',
                                  style: TextStyle(
                                      color: color_666,
                                      fontSize: Sp.sp12,
                                      fontWeight: FontWeight.normal),
                                  children: [
                                    TextSpan(
                                      text: ' Terms of Use ',
                                      style: TextStyle(color: colorMain),
                                      recognizer: TapGestureRecognizer()
                                        ..onTap = () {
                                        toast('Terms of Use');
                                        },
                                    ),
                                    const TextSpan(
                                      text: '&',
                                    ),
                                    TextSpan(
                                      text: ' Privacy Policy ',
                                      style: TextStyle(color: colorMain),
                                      recognizer: TapGestureRecognizer()
                                        ..onTap = () {
                                          toast('Privacy Policy');
                                        },
                                    ),
                                  ])),
                        )),
                      )
                    ]))));
      },
    );
  }

  List<Widget> get _buildBody => <Widget>[
    SizedBox(
      width: double.infinity,
      child: LoadImage(
        'img_login_bg'.pathLogin,
        fit: BoxFit.fitWidth,
      ),
    ),
    Container(
      width: double.infinity,
      margin:
      EdgeInsets.only(left: Dp.dp_31, right: Dp.dp_31, top: Dp.dp_25),
      child: InputTextField(
        iconPath: 'img_login_icon_phone'.pathLogin,
        textField: MyTextField(
          key: const Key('phone'),
          focusNode: state.nodeText1,
          controller: state.nameController,
          maxLength: 11,
          keyboardType: TextInputType.phone,
          hintText: "Enter your phone number",
          contentPadding: EdgeInsets.only(
              left: Dp.dp_83, top: Dp.dp_15, bottom: Dp.dp_15),
          onSaved: (value) {
            state.name = value ?? "";
          },
          validator: (val) {
            return validateEmpty(val, 'Phone number is required.');
          },
          autovalidateMode: state.validateMode,
        ),
        labelText: Text(
          "Phone Number",
          style: loginLabel,
        ),
        prefixText: Text(
          "+86",
          style: loginPre,
        ),
      ),
    ),
    Container(
      width: double.infinity,
      margin:
      EdgeInsets.only(left: Dp.dp_31, right: Dp.dp_31, top: Dp.dp_25),
      child: InputTextField(
        iconPath: 'img_login_icon_password'.pathLogin,
        textField: MyTextField(
          key: const Key('password'),
          keyName: 'password',
          focusNode: state.nodeText2,
          isInputPwd: true,
          controller: state.passwordController,
          keyboardType: TextInputType.visiblePassword,
          maxLength: 16,
          hintText: "Enter your password",
          contentPadding: EdgeInsets.only(
              left: Dp.dp_45, top: Dp.dp_15, bottom: Dp.dp_15),
          onSaved: (value) {
            state.pwd = value ?? "";
          },
          validator: (val) {
            return validateEmpty(val, 'Password is required.');
          },
          autovalidateMode: state.validateMode,
        ),
        labelText: Text(
          "Password",
          style: loginLabel,
        ),
      ),
    ),
    Container(
      margin: EdgeInsets.only(
        left: Dp.dp_20,
        right: Dp.dp_20,
        top: Dp.dp_40,
      ),
      child: ThemeButton(
        key: const Key('login'),
        onPressed: logic.login,
        text: 'Sign in',
      ),
    ),
    Row(
      children: [
        GestureDetector(
          onTap: () => toast('Forget pwd'),
          behavior: HitTestBehavior.opaque,
          child: Container(
            color: Colors.transparent,
            padding: EdgeInsets.symmetric(
                vertical: Dp.dp_15, horizontal: Dp.dp_20),
            child: Text(
              "Forget password?",
              key: const Key('forgotPassword'),
              style: TextStyle(fontSize: Sp.sp14, color: color_666),
            ),
          ),
        ),
        const Spacer(),
        GestureDetector(
          onTap: () => toast('Sign up'),
          behavior: HitTestBehavior.opaque,
          child: Container(
            color: Colors.transparent,
            padding: EdgeInsets.symmetric(
                vertical: Dp.dp_15, horizontal: Dp.dp_20),
            child: Text(
              "Sign up",
              key: const Key('Sign up'),
              style: TextStyle(fontSize: Sp.sp14, color: color_666),
            ),
          ),
        ),
      ],
    ),
  ];
}
